<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> </html><![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> </html><![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> </html><![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> </html><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>


<!--
	 The source code in the preview has been altered, stripped, compressed and encrypted for security reasons.
	 If you want to see how the source code you are getting in the purchased file looks like you should
	 you should look at the last screenshot on themeforest 
	 
	 	
	 Thank you!
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<title> Typography :: Presenter - Corporate Portfolio Template ::</title>
	<meta name="Description" content=" add description  ... " />

	<meta name="Keywords" content=" add keywords     ... " />
	<link href="./favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="./_layout/style.css" rel="stylesheet" type="text/css" media="all" /><link href="./_layout/style-print.css" rel="stylesheet" type="text/css" media="print" /><link id="css_bg" href="./_layout/bg2.css" rel="stylesheet" type="text/css" media="all" /><script src="./_layout/js/jquery-1.4.4.min.js" type="text/javascript"></script>
	<script src="./_layout/js/cufon/cufon.js" type="text/javascript"></script><script src="./_layout/js/cufon/Museo_Sans_500.font.js" type="text/javascript"></script><script src="./_layout/js/tipsy/jquery.tipsy.js" type="text/javascript"></script><link href="./_layout/js/tipsy/css.tipsy.css" rel="stylesheet" type="text/css" /><script src="./_layout/js/prettyphoto/jquery.prettyPhoto.js" type="text/javascript"></script><link href="./_layout/js/prettyphoto/css.prettyPhoto.css" rel="stylesheet" type="text/css" /><script src="./_layout/js/validity/jquery.validity.js" type="text/javascript"></script><link href="./_layout/js/validity/css.validity.css" rel="stylesheet" type="text/css" /><script src="./_layout/js/cycle/jquery.cycle.all.min.js" type="text/javascript"></script><script src="./_layout/js/tabify/jquery.tabify-1.4.js" type="text/javascript"></script><script src="./_layout/js/accordion/jquery.accordion.js" type="text/javascript"></script><script src="./_layout/js/scrollto/jquery.localscroll-min.js" type="text/javascript"></script><script src="./_layout/js/scrollto/jquery.scrollTo-min.js" type="text/javascript"></script><script src="./_layout/js/scripts.js" type="text/javascript"></script><script src="./_layout/js/plugins.js" type="text/javascript"></script>

	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
	
	<div class="panel">

		<ul id="stylechanger">
			<li><a id="bg1" href="#" title="default" class="tip">default</a></li>
			<li><a id="bg2" href="#" title="wood 1" class="tip">wood1</a></li>
			<li><a id="bg3" href="#" title="wood 2" class="tip">  </a></li>
			<li><a id="bg4" href="#" title="wood 3" class="tip">  </a></li>
			<li><a id="bg5" href="#" title="textile" class="tip">  </a></li>
			<li><a id="bg6" href="#" title="noise" class="tip">  </a></li>
			<li><a id="bg7" href="#" title="grudge" class="tip">  </a></li>
			<li><a id="bg8" href="#" title="leather" class="tip">  </a></li>
			<li><a id="bg9" href="#" title="metalic" class="tip">  </a></li>
		</ul>
		
	</div>
	
	<a class="openpanel tip" href="#" title="Background Switcher">open panel</a>

    <div id="wrap">  <noscript> <link href="./_layout/style-nojs.css" rel="stylesheet" type="text/css" /> <div class="nojs-warning"><strong>JavaScript seems to be Disabled!</strong> Some of the website features are unavailable unless JavaScript is enabled.</div> </noscript>  <div id="header"> <div class="row fixed">  <div class="dropdown-container fixed">  <a href="./index.html" title="Back Home" id="logo" class="tip"><img src="./_layout/images/logo.png" width="230" height="42" alt="" /></a>  <ul id="dropdown-menu" class="fixed">  <li><a href="./index.html">Home</a></li> <li class="current"><a href="./about-us.html">About Us</a> <ul class="sub-menu"> <li><a href="./about-us.html">About Us</a></li> <li><a href="./team.html">Meet the team</a></li> <li><a href="./clients.html">Clients</a></li> <li><a href="./typography.html">Typography</a></li> <li><a href="./columns.html">Columns Layouts</a></li> <li><a href="#">3rd level dropdown</a> <ul> <li><a href="#">Just an</a></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">example</a></li> </ul> </li> </ul> </li> <li><a href="./services.html">Services</a> <ul class="sub-menu"> <li><a href="./services.html">Service - Overview</a></li> <li><a href="./services-single-service.html">Service - Inner Page</a></li> </ul> </li> <li><a href="./portfolio-1-column.html">Portfolio</a> <ul class="sub-menu"> <li><a href="./portfolio-1-column.html">Portfolio - 1 Column</a></li> <li><a href="./portfolio-4-columns.html">Portfolio - 4 Columns</a></li> <li><a href="./portfolio-single-item.html">Portfolio - Item Page</a></li> </ul> </li> <li><a href="./blog.html">Blog</a> <ul class="sub-menu"> <li><a href="./blog.html">Blog</a></li> <li><a href="./blog-post.html">Blog Post</a></li> </ul> </li> <li class="last"><a href="./contact.html">Contact</a></li>  </ul>   </div>   </div>   <div class="hr"></div>  <div class="row inner-page-title-container">  <h3>Typography</h3>  </div>     </div> <div id="content"> <div class="row fixed"> <div class="col-220"> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ut dui quis nisl convallis fringilla.</p> <h4>Sidebar navigation</h4> <br /> <ul class="side-nav"> <li><a href="#">Vivamus elementum</a></li> <li><a href="#">Nulla et orci neque</a></li> <li><a href="#">Ut neque metus</a></li> </ul> </div> <div class="col-700 last"> <h1>This is a h1 tag</h1> <p>Suspendisse potenti. Nullam in lectus nibh, in semper eros. Integer nec diam tellus. Quisque sit amet auctor purus. Sed vitae erat et tellus adipiscing lobortis vel in orci. Morbi semper, lacus ac rutrum tincidunt, eros ipsum ultricies lorem, quis dictum sem eros sed ante. Curabitur adipiscing vulputate euismod. Phasellus commodo nisi vitae tellus adipiscing faucibus at nec leo. Mauris laoreet mi et augue sodales accumsan. Suspendisse vel mauris metus, ac tristique enim. </p> <h2>This is a h2 tag</h2> <p>Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst. Integer eget placerat diam. Praesent eget nunc vel sem bibendum adipiscing. Aliquam faucibus diam non metus aliquet eu euismod lorem elementum. Rasid tempor orci. Aliquam erat volutpat. Etiam condimentum rhoncus tellus et sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <h3>This is an h3 tag</h3> <p>Ut rutrum, odio a suscipit aliquam, nunc elit suscipit lorem, nec sodales urna enim in leo. In quis lacus eu felis cursus pellentesque. Nullam dolor elit, dictum non accumsan nec, accumsan quis libero. Morbi faucibus pellentesque tortor, ut fermentum nisl luctus et.</p> <h4>This is an h4 tag</h4> <p>Morbi leo purus, imperdiet at cursus non, vulputate sit amet dui. Duis feugiat augue vitae turpis placerat eget condimentum elit bibendum. Aliquam molestie, sapien ac lacinia vehicula, turpis velit porttitor arcu, vitae gravida orci ipsum et massa. Phasellus vel imperdiet est.</p> <h5>This is an h5 tag</h5> <p>Vivamus neque urna, posuere et mattis nec, accumsan scelerisque felis. Cras et libero leo. Maecenas consectetur semper nisi eu iaculis. Vestibulum vehicula feugiat nisl, eu pharetra nibh tincidunt vitae. Donec aliquam erat ut dolor auctor.</p> <h6>This is an h6 tag</h6> <p>Duis id orci eu orci placerat tincidunt. Pellentesque fringilla ante vitae neque varius laoreet.</p> <div class="hr"></div> <h3>Unordered list</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Phasellus adipiscing ante ac mi laoreet commodo.</li> <li>Fusce iaculis lectus quis enim dictum ultrices.</li> </ul> <h3>Ordered list</h3> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Phasellus adipiscing ante ac mi laoreet commodo.</li> <li>Fusce iaculis lectus quis enim dictum ultrices.</li> </ol> <h3>Checkbox list</h3> <code> &lt;ul class=&quot;checklist&quot;&gt; ... &lt;/ul&gt; </code> <ul class="checklist"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Phasellus adipiscing ante ac mi laoreet commodo.</li> <li>Fusce iaculis lectus quis enim dictum ultrices.</li> </ul> <div class="hr"></div> <h3>Paragraphs &amp; Images in Paragraphs</h3> <p>Suspendisse potenti. Nullam in lectus nibh, in semper eros. Integer nec diam tellus. Quisque sit amet auctor purus. Sed vitae erat et tellus adipiscing lobortis vel in orci. Morbi semper, lacus ac rutrum tincidunt, eros ipsum ultricies lorem, quis dictum sem eros sed ante. Curabitur adipiscing vulputate euismod. Phasellus commodo nisi vitae tellus adipiscing faucibus at nec leo. Mauris laoreet mi et augue sodales accumsan. Suspendisse vel mauris metus, ac tristique enim. </p> <code> &lt;img src=&quot;...&quot; alt=&quot;&quot; <strong>class=&quot;img-align-left bordered&quot;</strong> /&gt; </code> <p><img src="./_content/typography/1.jpg" alt="" class="img-align-left bordered" /> Ut rutrum, odio a suscipit aliquam, nunc elit suscipit lorem, nec sodales urna enim in leo. In quis lacus eu felis cursus pellentesque. Nullam dolor elit, dictum non accumsan nec, accumsan quis libero. Morbi faucibus pellentesque tortor, ut fermentum nisl luctus et.</p> <p>Morbi leo purus, imperdiet at cursus non, vulputate sit amet dui. Duis feugiat augue vitae turpis placerat eget condimentum elit bibendum. Aliquam molestie, sapien ac lacinia vehicula, turpis velit porttitor arcu, vitae gravida orci ipsum et massa. Phasellus vel imperdiet est.</p> <code> &lt;img src=&quot;...&quot; alt=&quot;&quot; <strong>class=&quot;img-align-right bordered&quot;</strong> /&gt; </code> <p><img src="./_content/typography/1.jpg" alt="" class="img-align-right bordered" />Morbi a eros sed nisi laoreet molestie. Nulla facilisi. Duis condimentum molestie lacus ac tincidunt. Cras rhoncus odio quis risus porta ullamcorper adipiscing nulla sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus ligula, et ullamcorper odio. Morbi leo purus, imperdiet at cursus non, vulputate sit amet dui. Duis feugiat augue vitae turpis placerat eget condimentum elit bibendum. Aliquam molestie, sapien ac lacinia vehicula, turpis velit porttitor arcu, vitae gravida orci ipsum et massa. Phasellus vel imperdiet est. </p> <div class="hr"></div> <h3>Blockquote</h3> <p>Suspendisse potenti. Nullam in lectus nibh, in semper eros. Integer nec diam tellus. Quisque sit amet auctor purus. Sed vitae erat et tellus adipiscing lobortis vel in orci. Morbi semper, lacus ac rutrum tincidunt, eros ipsum ultricies lorem, quis dictum sem eros sed ante. Curabitur adipiscing vulputate euismod. Phasellus commodo nisi vitae tellus adipiscing faucibus at nec leo. Mauris laoreet mi et augue sodales accumsan. Suspendisse vel mauris metus, ac tristique enim.</p> <blockquote class="clear"> <p>Praesent nec aliquet elit. Nullam convallis placerat metus, sit amet ultrices nulla faucibus sit amet. Quisque dictum lorem sed sem pharetra luctus. Donec sed posuere nisl. Aliquam eu vestibulum mauris. <br /> <span><strong>John Doe</strong>, Some Business</span></p> </blockquote> <p>Morbi leo purus, imperdiet at cursus non, vulputate sit amet dui. Duis feugiat augue vitae turpis placerat eget condimentum elit bibendum. Aliquam molestie, sapien ac lacinia vehicula, turpis velit porttitor arcu, vitae gravida orci ipsum et massa. Phasellus vel imperdiet est.</p> <blockquote class="blockquote-right"> <p>Suspendisse semper, tortor et lobortis mattis, turpis lacus placerat tortor.</p> </blockquote> <p>Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst. Integer eget placerat diam. Praesent eget nunc vel sem bibendum adipiscing. Aliquam faucibus diam non metus aliquet eu euismod lorem elementum.</p> <p>Ut rutrum, odio a suscipit aliquam, nunc elit suscipit lorem, nec sodales urna enim in leo. In quis lacus eu felis cursus pellentesque. Nullam dolor elit, dictum non accumsan nec, accumsan quis libero. Morbi faucibus pellentesque tortor, ut fermentum nisl luctus et.</p> <blockquote class="blockquote-left"> <p>Etiam nisl eros, rhoncus eu sollicitudin ac, lacinia at tortor congue tortor auctor. <br /> <span><strong>John Doe</strong>, Some Business</span></p> </blockquote> <p>Morbi leo purus, imperdiet at cursus non, vulputate sit amet dui. Duis feugiat augue vitae turpis placerat eget condimentum elit bibendum. Aliquam molestie, sapien ac lacinia vehicula, turpis velit porttitor arcu, vitae gravida orci ipsum et massa. Phasellus vel imperdiet est.</p> <p>Cras et libero leo. Maecenas consectetur semper nisi eu iaculis. Vestibulum vehicula feugiat nisl, eu pharetra nibh tincidunt vitae. Donec aliquam erat ut dolor auctor. Vivamus neque urna, posuere et mattis nec, accumsan scelerisque felis.</p> <div class="hr"></div> <h3>Message Boxes</h3> <br /> <div class="errormsg">Error Message</div> <div class="successmsg">Success Message</div> <div class="infomsg">Information Message</div> <div class="noticemsg">Notice Message</div> <div class="hr"></div> <h3>Text Highlight</h3> <p>Suspendisse <span class="text-highlight">sed diam libero</span> vel, commodo lorem. Sed dictum pellentesque mauris in cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <span class="text-highlight2">Nunc non massa lectus</span> aliquam vehicula porttitor leo, sed rhoncus mi rhoncus a. Sed a neque non nisi convallis imperdiet.</p> <div class="hr"></div> <h3>Code Preview</h3> <code> Print &quot;Hello, World!&quot;; </code> <div class="hr"></div> <h3>Tables</h3> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <th>Th Header 1</th> <th>Th Header 2</th> <th>Th Header 3</th> <th>Th Header 4</th> </tr> <tr> <td>Td Content 1</td> <td>Td Content 2</td> <td>Td Content 3</td> <td>Td Content 4</td> </tr> <tr class="alt"> <td>Td Content 1</td> <td>Td Content 2</td> <td>Td Content 3</td> <td>Td Content 4</td> </tr> <tr> <td>Td Content 1</td> <td>Td Content 2</td> <td>Td Content 3</td> <td>Td Content 4</td> </tr> </tbody> </table> <div class="hr"></div> <h3>Tabs &amp; Toggles</h3> <br /> <ul id="tab-1" class="tabs-menu fixed"> <li class="current"><a href="#content-tab-1-1">Tab 1</a></li> <li><a href="#content-tab-1-2">Tab 2</a></li> <li><a href="#content-tab-1-3">Tab 3</a></li> </ul> <div id="content-tab-1-1" class="tabs-content"> <p>Phasellus egestas accumsan laoreet. Phasellus tincidunt ipsum sit amet urna egestas rhoncus. Etiam quis lacus a nulla lacinia lobortis ut nec orci. Morbi in metus non tellus viverra convallis quis sit amet lacus.</p> </div> <div id="content-tab-1-2" class="tabs-content"> <p>Vivamus in nibh cursus ipsum condimentum imperdiet. Mauris in magna sed felis ornare rhoncus. Etiam ac mi id leo tincidunt gravida sit amet vel erat. Fusce in magna neque. Vestibulum dignissim diam non arcu vehicula scelerisque ornare felis pellentesque. Mauris ac metus arcu.</p> </div> <div id="content-tab-1-3" class="tabs-content"> <p>Pellentesque ut mauris ipsum, vitae pulvinar magna. Sed ac ante eros, eu feugiat ipsum. Phasellus nec orci lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac hendrerit purus.</p> </div> <ul id="accordion-1" class="accordion fixed"> <li> <a href="#accordion-1-slide-1">Accordeon Slide 1</a> <div> <p>Phasellus egestas accumsan laoreet. Phasellus tincidunt ipsum sit amet urna egestas rhoncus. Etiam quis lacus a nulla lacinia lobortis ut nec orci. Morbi in metus non tellus viverra convallis quis sit amet lacus.</p> </div> </li> <li> <a href="#accordion-1-slide-2">Accordeon Slide 2</a> <div> <p>Vivamus in nibh cursus ipsum condimentum imperdiet. Mauris in magna sed felis ornare rhoncus. Etiam ac mi id leo tincidunt gravida sit amet vel erat. Fusce in magna neque. Vestibulum dignissim diam non arcu vehicula scelerisque ornare felis pellentesque. Mauris ac metus arcu.</p> </div> </li> </ul> </div> </div> </div> <div id="footer"> <div class="hr"></div> <div class="row fixed"> <div class="col-220"> <p class="last">&copy; 2011 Presenter Corporate Portfolio.</p> </div> <div class="col-460"> <p class="last"><a href="#">Terms of Service</a> / <a href="#">Privacy Policy</a> / <a href="#">Contact</a></p> </div> <div class="col-220 last"> <ul id="social-media" class="fixed"> <li><img src="./_layout/images/social-icons/facebook.png" width="14" height="14" alt="facebook" /><a href="#">Join Us on Facebook</a></li> <li><img src="./_layout/images/social-icons/twitter.png" width="14" height="14" alt="twitter" /><a href="#">Twitter</a></li> </ul> </div> </div> </div> </div> 
	
	<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>